<template>
  <!-- 个人中心页面 -->
  <div class="my-person">
    <div class="header">
      <p>
        <i class="el-icon-service"></i> 个人中心
      </p>
    </div>
    <div class="main">
      <ElRow>
        <ElCol :span="5">
          <el-card class="left">
            <!-- 左侧栏目 -->
            <div class="person">
              <!-- 头像 -->
              <div class="person-photo">
                <!-- <img src="../../img/gan.png" alt srcset> -->
                <my-photo :userName="this.$store.state.user.userName" :photo="this.$store.state.user.photo" line-height="100px" font-size="50px" :nojump="true"></my-photo>
              </div>

              <!-- 昵称 -->
              <p class="nickname">{{this.$store.state.user.userName}}</p>
              <!-- 签到按钮 -->
              <!-- <el-button type="primary" size="mini" class="my-btn-clock-in">签到</el-button> -->
              <!-- 签名 -->
              <p class="signature">写点什么吧，不要太懒了</p>

              <!-- 个人成就 -->
              <div class="person-achievement">
                <div class="achievement-item">
                  <span class="num">20</span>
                  <span class="title">过审投稿</span>
                </div>
                <div class="achievement-item">
                  <span class="num">20</span>
                  <span class="title">关注</span>
                </div>
                <div class="achievement-item">
                  <span class="num">20</span>
                  <span class="title">粉丝</span>
                </div>
                <div class="achievement-item">
                  <span class="num">20</span>
                  <span class="title">阔乐</span>
                </div>
                <div class="achievement-item">
                  <span class="num">20</span>
                  <span class="title">等级</span>
                </div>
              </div>
            </div>
            <!-- 选项列表 -->
            <div class="list">
              <ul>
                <li>
                  <span>欢迎</span>
                </li>
                <router-link tag="li" :to="{name:'sc'}">
                  <span>收藏夹</span>
                </router-link>
                  <router-link tag="li" :to="{name:'ls'}">
                  <span>历史</span>
                </router-link>
                <router-link tag="li" :to="{name:'sx'}">
                  <span>私信</span>
                </router-link>
                <router-link tag="li" :to="{name:'tg'}">
                  <span>投稿</span>
                </router-link>
                <router-link tag="li" :to="{name:'tg-gl'}">
                  <span>投稿管理</span>
                </router-link>
                <router-link tag="li" :to="{name:'qz'}">
                  <span>圈子</span>
                </router-link>
                 <router-link tag="li" :to="{name:'sz'}">
                  <span>设置</span>
                </router-link>
              </ul>
            </div>
          </el-card>
        </ElCol>
        <ElCol :span="19">
          <el-card class="right">
            <!-- 左边标题栏 -->
            <div class="right-title">
              <h1>欢迎</h1>
            </div>
            <!-- 左边内容区域 -->
            <div class="content">
              <router-view></router-view>
            </div>
          </el-card>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>

<script>
export default {
  name: "name",
  data: function() {
    return {
      letterUserList:[]
    };
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
img {
  height: 100%;
  width: 100%;
}
.my-person {
  font-size: 12px;
  margin-bottom: 12px;
  .header {
    // border-bottom: 1px solid #dcdfe6;
    p {
      padding: 0px;
      margin: 0px;
      font-size: 35px;
      font-weight: bold;
      text-align: right;
      color: #409eff;
    }
  }

  .main {
    padding-top: 12px;
    height: 1080px;
    /* 左边栏样式 */
    .left {
      height: 1080px;
      border-right: 1px solid #dcdfe6;
      padding: 0 24px;
      /* 顶部个人信息栏样式 */
      .person {
        /* 照片 */
        text-align: center;
        .person-photo {
          height: 100px;
          width: 100px;
          margin: 0 auto;
          border-radius: 50px;
          overflow: hidden;
        }
        .nickname {
          font-size: 20px;
          font-weight: bold;
          color: #666;
        }
        /* 签到按钮宽度 */
        .my-btn-clock-in {
          width: 100px;
        }
        /* 个性签名 */
        .signature {
          color: #909399;
          text-align: left;
          //padding-left: 30px;
        }
        /*个人成就*/
        .person-achievement {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          color: #606266;
          .achievement-item {
            width: 33.3333333%;
            margin: 8px 0;
            span {
              display: block;
            }
            .title {
              font-style: italic;
            }
            .num {
              color: #409eff;
              font-weight: bold;
            }
          }
        }
      }
      /*选项列表*/
      .list {
        font-size: 24px;
        color: #909399;
        .router-link-active {
          color: #409eff;
          cursor: pointer;
        }
        li {
          margin: 15px 0;
          &:focus {
            color: #409eff;
          }
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }

    .right {
      // background: #f5f7fa;
      height: 1080px;
      .right-title {
        color: gray;
        background: white;
        width: 100%;
        height: 38px;
        border-bottom: 1px solid #dcdfe6;
        box-shadow: 0px 1px 1px #dcdfe6;
      }
      .content-main {
        width: 100%;
        height: 100%;
      }
      .content {
        margin-top: 30px;
      }
    }
  }
}
</style>